<!-- 绩效数据 -->
<template>
  <div class="detail-box">
    <div class="header-box">
      <div class="text-box">
        <span class="text-left">A</span>
        <span class="text-right">类供应商</span>
      </div>
    </div>
    <div class="content-box">
      <div v-for="(item, index) in perList" :key="index" class="card-box">
        <div class="card-header" @click="itemClick(item)">
          <span class="mr-30">考核时间：{{ item.startTime }}  至  {{ item.endTime }}</span>
          <span class="ml-30 mr-30">考核等级：{{ item.level }}级</span>
          <span class="ml-30">总得分：{{ item.totalScore }}</span>
          <div class="icon-box">
            <a-icon v-show="!item.cardShow" type="down-circle" :style="{ color: '#6C6C6C' }" />
            <a-icon v-show="item.cardShow" type="up-circle" :style="{ color: '#1890FF' }" />
          </div>
        </div>
        <transition name="modal-fade">
          <div v-show="item.cardShow" class="card-content">
            <div v-for="(cItem, cIndex) in item.cardList" :key="cIndex" class="table-box">
              <div class="title">{{ cItem.title }}</div>
              <table>
                <thead>
                  <tr>
                    <th colspan="4">
                      <span>总分：{{ cItem.totalScore }}</span>
                      <span class="ml-30">自动化考核时间：{{ cItem.time }}</span>
                    </th>
                  </tr>
                  <tr>
                    <th>序号</th>
                    <th>考核项</th>
                    <th>百分比</th>
                    <th>得分</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(gItem, gIndex) in cItem.tableList" :key="gIndex">
                    <td>{{ gIndex + 1 }}</td>
                    <td>{{ gItem.name }}</td>
                    <td>{{ gItem.weight }}%</td>
                    <td>{{ gItem.score }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'PerformanceInfo',
  components: {
  },
  data() {
    return {
      perList: [
        {
          startTime: '2024-01-01',
          endTime: '2024-12-31',
          level: 'A',
          totalScore: '98',
          cardShow: true,
          cardList: [
            {
              title: '自动化考核得分明细',
              totalScore: '28',
              time: '2024-06-08 11:08:30',
              tableList: [
                { name: '交货及时率', weight: '80', score: '8' },
                { name: '入库合格率', weight: '100', score: '10' },
                { name: '使用不良率', weight: '100', score: '10' },
              ]
            },
            {
              title: '定性考核得分明细',
              totalScore: '70',
              time: '2024-06-08 11:08:30',
              tableList: [
                { name: '价格', weight: '30', score: '21' },
                { name: '付款条件', weight: '20', score: '14' },
                { name: '履约交互', weight: '20', score: '14' },
                { name: '服务态度', weight: '15', score: '10.5' },
                { name: '品质', weight: '15', score: '10.5' },
              ]
            }
          ]
        },
        {
          startTime: '2024-01-01',
          endTime: '2024-12-31',
          level: 'A',
          totalScore: '98',
          cardShow: false,
          cardList: [
            {
              title: '自动化考核得分明细',
              totalScore: '28',
              time: '2024-06-08 11:08:30',
              tableList: [
                { name: '交货及时率', weight: '80', score: '8' },
                { name: '入库合格率', weight: '100', score: '10' },
                { name: '使用不良率', weight: '100', score: '10' },
              ]
            },
            {
              title: '定性考核得分明细',
              totalScore: '70',
              time: '2024-06-08 11:08:30',
              tableList: [
                { name: '价格', weight: '30', score: '21' },
                { name: '付款条件', weight: '20', score: '14' },
                { name: '履约交互', weight: '20', score: '14' },
                { name: '服务态度', weight: '15', score: '10.5' },
                { name: '品质', weight: '15', score: '10.5' },
              ]
            }
          ]
        },
        {
          startTime: '2024-01-01',
          endTime: '2024-12-31',
          level: 'A',
          totalScore: '98',
          cardShow: false,
          cardList: [
            {
              title: '自动化考核得分明细',
              totalScore: '28',
              time: '2024-06-08 11:08:30',
              tableList: [
                { name: '交货及时率', weight: '80', score: '8' },
                { name: '入库合格率', weight: '100', score: '10' },
                { name: '使用不良率', weight: '100', score: '10' },
              ]
            },
            {
              title: '定性考核得分明细',
              totalScore: '70',
              time: '2024-06-08 11:08:30',
              tableList: [
                { name: '价格', weight: '30', score: '21' },
                { name: '付款条件', weight: '20', score: '14' },
                { name: '履约交互', weight: '20', score: '14' },
                { name: '服务态度', weight: '15', score: '10.5' },
                { name: '品质', weight: '15', score: '10.5' },
              ]
            }
          ]
        },
        {
          startTime: '2024-01-01',
          endTime: '2024-12-31',
          level: 'A',
          totalScore: '98',
          cardShow: false,
          cardList: [
            {
              title: '自动化考核得分明细',
              totalScore: '28',
              time: '2024-06-08 11:08:30',
              tableList: [
                { name: '交货及时率', weight: '80', score: '8' },
                { name: '入库合格率', weight: '100', score: '10' },
                { name: '使用不良率', weight: '100', score: '10' },
              ]
            },
            {
              title: '定性考核得分明细',
              totalScore: '70',
              time: '2024-06-08 11:08:30',
              tableList: [
                { name: '价格', weight: '30', score: '21' },
                { name: '付款条件', weight: '20', score: '14' },
                { name: '履约交互', weight: '20', score: '14' },
                { name: '服务态度', weight: '15', score: '10.5' },
                { name: '品质', weight: '15', score: '10.5' },
              ]
            }
          ]
        }
      ]
    };
  },
  mounted() {
  },
  methods: {
    itemClick(item) {
      item.cardShow = !item.cardShow;
    }
  }
}
</script>

<style lang="less" scoped>
/* 定义模态框淡入淡出的过渡效果 */
.modal-fade-enter-active, .modal-fade-leave-active {
  transition: opacity 0.2s;
}
/* 进入过渡的起始状态 */
.modal-fade-enter, .modal-fade-leave-to {
  opacity: 0;
}

.detail-box {
  background-color: #F8F6F5;
}

.header-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  border-radius: 0px 0px 8px 8px;
  background: linear-gradient(88.71deg, rgba(31,127,227,1) 9.73%,rgba(67,159,255,1) 83.6%);
  font-size: 14px;
  .text-box {
    color: #fff;
    .text-left {
      font-size: 72px;
      font-family: PingFangSC-bold;
    }
    .text-right {
      font-size: 18px;
      font-family: PingFangSC-regular;
      margin-left: 15px;
    }
  }
}

.content-box {
  position: relative;
  top: -48px;
  margin: 0 20px;
  border-radius: 8px 8px 0px 0px;
  overflow: hidden;
  background-color: #fff;
}
.card-box {
  .card-header {
    position: relative;

    height: 48px;
    line-height: 48px;

    background-color: rgba(239, 246, 253, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 18px;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2);

    margin-bottom: 1px;
    padding: 0 20px;
    cursor: pointer;
    .icon-box {
      position: absolute;
      top: 0;
      right: 20px;
    }
  }
  .card-content {
    padding: 10px 30px 20px;
    .table-box {
      border-radius: 8px 8px 0px 0px;
      background-color: rgba(255,255,255,1);
      border: 1px solid rgba(187, 187, 187, 1);
      padding: 10px 10px 20px;
      margin-top: 10px;
      .title {
        color: rgba(79, 79, 79, 1);
        font-size: 14px;
      }
    }
  }
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
table, th, td {
  border: 1px solid #ccc;
}
th, td {
  padding: 8px;
}
/* 表头样式 */
th {
  background-color: rgba(239, 246, 253, 1);
}
</style>